<template>
  <el-header style="background-color:#6e1a6f">
    <div class="toolbar">
      <el-avatar :size="40" :src="userPic" @error="errorHandler" style="cursor: pointer;" v-if="jwt.hasToken()" @click="router.replace('/userAvatar')">
      <img
        src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
      />
      </el-avatar>
      <el-button type="success" :icon="User" round @click="router.replace('/login')" v-if="!jwt.hasToken()">登录</el-button>
      <el-button :icon="User" round @click="router.replace('/userInfo')" v-if="jwt.hasToken()">{{nickname}}</el-button>
      <el-dropdown v-if="jwt.hasToken()">
        <el-icon style="margin: 10px;color: white;"><MoreFilled /></el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="jwt.logout()">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script setup>
import jwt from '../../jwt';
import { MoreFilled, User } from '@element-plus/icons';
import router from '../../router/index.js';
import { ref } from 'vue';
const errorHandler = () => true
// 使用ref确保nickname是响应式的
const nickname = ref(localStorage.getItem('nickname'));
const userPic = ref(localStorage.getItem('userPic'));
const userId=localStorage.getItem('userId');//获取当前登录用户的id
</script>

<style scoped>
.el-header {
  text-align: right;
  font-size: 12px;
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
  gap: 10px; /* 添加间距以便元素之间有一定的间隔 */
}

/* 你可以添加更多样式来美化昵称的显示 */
.toolbar span {
  font-weight: bold;
  color: #333;
}
</style>